@import url('../../style.less');

//整个页面内填充35rpx
.page {
	padding: 35rpx;
}
// 第一部分的view
.user-info {
	//顶部外填充50rpx
	margin-top: 50rpx;
	//底部内填充20rpx，下一个view已经是顶部外填充了，这里要底部内填充，padding-bottom: 20rpx;+padding: 15rpx 0;
	padding-bottom: 20rpx;
	//最外层的淡淡圆圈 -->
	//-———————————————————————头像部分——————————————————————————————————————————————————
	.border-outer {
		width: 320rpx;
		height: 320rpx;
		//淡淡的粉色
		background-color: #fbe3e1;
		//允许你设置元素的外边框圆角。
		border-radius: 160rpx;
		display: flex;
		//justify-content: center;     /* 居中排列 */
		//全部都挤在中间，两边全是空白
		//调整内容
		justify-content: center;
		//使得所有子节点都设置为居中
		//对准项目
		align-items: center;
		//自动左右外填充
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40rpx;
		.border-inner {
			width: 280rpx;
			height: 280rpx;
			background-color: #f5b8b4;
			border-radius: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.photo {
				width: 200rpx;
				height: 200rpx;
				border-radius: 120rpx;
				//block，独占一行，整一个只有photo在那布局占着
				display: block;
				border: solid 20rpx #ec7872;
			}
		}
	}
	//-———————————————————————头像部分——————————————————————————————————————————————————
	//第一部分下面的summary
	.summary {
		///flex，水平布局
		display: flex;
		//justify-content: space-between; 一个贴头一个贴尾，剩下的间隔在中间
		justify-content: space-between;
		background-color: #f5f5f5;
		color: @font-color;
		//上下外填充15rpx
		padding: 15rpx 0;
		view {
			text-align: center;
			flex-grow: 1;
			flex-shrink: 1;
			&:nth-child(2) {
				//左边竖线
				border-left: solid 1rpx #e0e0e0;
				//右边竖线
				border-right: solid 1rpx #e0e0e0;
			}
			.title {
				display: block;
				color: #999;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
			.value {
				display: block;
				color: @font-color;
				font-size: 32rpx;
			}
		}
	}
}
// 第二、三部分的view；用户信息栏目；系统管理栏目
.list-title {
	font-size: 32rpx;
	font-weight: bold;
	color: @background-color;
	border-left: solid 15rpx @background-color;
	//左内填充20rpx
	padding-left: 20rpx;
	//外上下填充35rpx
	margin: 35rpx 0;
}
